<html>
<head>
    <title>DEMO</title>
</head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<body>
<input type="file" name="file" id="post_file">
<input type="file" name="file" id="post_file1">
<div id="label">
    <canvas id="get_image"></canvas>
    <canvas id="edit_pic" width="1080" height="400"></canvas>
</div>
<!--<p id="show_edit"><img /></p>-->
<p id="xx"></p>
<button id="cut">裁剪</button>
<script type="text/javascript">
    var fd=new FormData();
    var _URL = window.URL || window.webkitURL;
    var getImage = document.getElementById('get_image');
    var editPic = document.getElementById('edit_pic');
    var postFile = {
        init: function() {
            var t = this;
            $('#cut').on('click', t.handleFiles);
            document.getElementById('post_file').addEventListener("change", t.setsize, false);
        },
        setsize:function(){
            var file, img;
            if ((file = this.files[0])) {
                img = new Image();
                img.onload = function () {
                    getImage.width= this.width;
                    getImage.height = this.height;
                };
                img.src = _URL.createObjectURL(file);
            }
        },
        handleFiles: function() {
            var fileList = $('#post_file').get(0).files[0];
            alert("asdsda");
            var oFReader = new FileReader();
            oFReader.readAsDataURL(fileList);
            oFReader.onload = function () {
                postFile.paintImage(oFReader.result);
            };
        },
        paintImage: function(url) {
            var t = this;
            var createCanvas = getImage.getContext("2d");
            var img = new Image();
            img.src = url;
            img.onload = function(){
                createCanvas.drawImage(img,0,0);
                t.imgUrl = getImage.toDataURL();
                t.cutImage();
            };
        },
        cutImage: function() {
            var t = this;
            var ctx = editPic.getContext('2d');
            var images = new Image();
            images.src = t.imgUrl;

            images.onload = function(){
                ctx.drawImage(images,0, 0, 1080, 400); //裁剪图片
//                document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL("image/jpg");
                var data=editPic.toDataURL();
                data=data.split(',')[1];
                data=window.atob(data);
                var ia = new Uint8Array(data.length);
                for (var i = 0; i < data.length; i++) {
                    ia[i] = data.charCodeAt(i);
                }
                var blob=new Blob([ia], {type:"image/png"});
                fd.append('file',blob);
                fd.append("introduce", "sasa");
                fd.append("url", "呵呵都A");
                fd.append("filetype", "jpg");
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){

                    if( xhr.readyState == 4 && xhr.status == 200 ){
                        callback(xhr.responseText);
                    }else if( xhr.readyState == 4 && xhr.status == 406 ){
                        alert("上传失败，文件过大");
                    }
                };
                //发送文件和表单自定义参数
                xhr.open("POST",  'http://localhost:8099/photo',true);

                xhr.send(fd);
            };


        }
    };
    postFile.init();


</script>
</body>
</html>

